<template lang="html">
  <section class="components-course_detail-footer">
    <div class="confirmBtn" @click="$emit('eNextStep')">
      {{stepText ? stepText : '舞家课程...'}}
    </div>
    <div class="shareBtn" @click="$emit('')">
      <!-- showShareLayer -->
      <i class="ic-share"></i>
      Share
    </div>
  </section>
</template>

<script>
export default {
  props: {
    stepText: {
      typoe: String
    }
  },
}
</script>

<style lang="scss" scoped>
@import "../../css/config";
$shareWidth: 180px;
.components-course_detail-footer{
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 0;
  width: 100%;
  height: $course-footer-height;
  color: #fff;
  font-size: 33px;
  box-sizing: border-box;
  padding-right: $shareWidth;
  .confirmBtn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: $common-red;
    &:active{
      color: $active-font;
      background-color: $active-bg;
    }
  }
  .shareBtn{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: $shareWidth;
    height: 100%;
    background-color: #ff505e;
    &:active{
      opacity: 0.8;
    }
    i{
      font-size: 20px;
      padding-right: 20px;
      padding-left: 10px;
    }
  }
}
</style>
